因為這個平台希望能透過輕度遊戲化的方式幫助引導孩子完成每天的任務，例如收拾書包、刷牙、整理房間，讓「例行公事」變得更有趣、更具成就感。同時，因為家長是陪伴孩子的關鍵角色，所以這個平台也必須兼顧家長端的操作體驗，才能真正發揮作用。

一開始，我對平台的期待是，希望它不只是一個任務清單，而是能跨裝置、跨平台，像遊戲一樣吸引孩子持續使用的工具。然而，從理想到落實的過程中，卻遇到了一個挑戰：裝置之間的使用情境差異。

在整個開發設計階段，我主要專注於電腦與平板的橫向體驗，卻忽略了現實中多數人第一次接觸平台時，其實都是透過手機直向操作。這個看似小小的疏忽，變成一個影響初次使用體驗的問題，也迫使我重新審視平台的整體設計方向。

一開始的設計：只顧電腦與平板

由於我原本是桌面工程師，對網頁開發並不算熟悉，因此在最初的開發策略上，採取了比較務實的想法：

• 先確保 電腦網頁版 能夠正常使用
• 平板裝置以 橫向模式 操作時，也能有不錯的體驗
• 至於 手機直向模式？先不管，只要橫向能用就好

為了讓大畫面的介面在手機上「至少能操作」，我甚至在程式裡加了一個限制：

if (使用移動裝置 && 畫面為直向) {
顯示提示訊息：請旋轉螢幕至橫向模式
禁止操作平台
}

當時我覺得這樣可以解決問題，但事實證明這是個大錯誤。

家長的第一個反饋：為什麼要橫向？

平台雖然是設計給家長/孩子共同使用，但第一個接觸平台的人主要是家長。他們通常透過手機上的連結點進來，結果一打開卻看到提示：「請轉橫向才可使用」。

「為什麼一定要橫向？很不方便耶！」

這是我收到最多的回饋。

這才讓我意識到，雖然理想情境是孩子用平板或電腦操作，但實際上，多數家長第一次體驗都是在手機直向畫面。若這一關體驗不佳，他們可能直接關掉，不再給孩子機會使用。

於是，我不得不回來正視這個問題。

AI 給我的建議：直向模式不難！

當下我的第一個想法是：難道要整個平台介面重新設計嗎？ 對一個不熟網頁開發的桌面工程師來說，雖然有 AI 幫忙，但還是覺得很麻煩。

幸好，我的 AI 夥伴給我提供了幾個方向：

• 其實 不用完全重做
• 只要在同一份 CSS 中，針對不同裝置方向寫樣式即可
• 對於部分頁面，可以 重新設計局部元件，而不是全頁重做

這讓我鬆了一口氣。原來直向模式的支援，並不是想像中那麼可怕。原因在於 RWD（Responsive Web Design） 的概念：透過響應式設計，我們可以針對不同螢幕尺寸、不同方向調整樣式，而不必重做整個平台。實際上，只要在 CSS 中使用 媒體查詢（media query）就能完成大部分調整。

@media screen and (orientation: portrait) {
  /* 手機直向樣式 */
}

簡單來說，RWD 讓我們能夠根據螢幕條件（尺寸、方向）動態調整版面與元件大小，讓同一個平台在桌面、平板和手機上都能有良好的使用體驗。
透過 media query 的設計，我在手機直向模式下，將泡泡任務的呈現方式改成簡單條列顯示，不只是解決顯示問題，也比較符合家長的使用偏好。

我的做法：逐頁檢查，邊改邊試

最後我採取的策略是：

1. 先處理只需要 微調排版 的頁面
2. 再來處理 差異較大的頁面，必要時針對直向重做部分介面

幸好，Chrome 的開發者工具可以直接模擬各種螢幕尺寸與方向，這讓測試非常方便。我只要交給 AI 描述需求，它就能快速生成對應的 CSS 或版面。

結果，僅花費 一兩天時間，我就完成了一版支援手機直向畫面的版本，完全移除需要橫向使用的限制。

PWA 的小挑戰

除了直向支援，平台還面臨了另一個挑戰：PWA（Progressive Web App）的安裝與使用體驗。

PWA 的特性是在手機瀏覽器中使用時，系統會自動跳出「安裝到桌面」的提示。不過，這個提示的跳出時機，開發者完全無法控制。因此，若使用者錯過，可能就不知道可以透過安裝到桌面獲得更好的使用體驗。

AI 幫我設計了一個提醒流程：

• 偵測到使用者是 行動裝置瀏覽器，就主動顯示提示訊息
• 若偵測到是 從安裝好的 PWA 應用開啟，則不再顯示

這樣一來，使用者能夠清楚知道：「安裝到桌面，可以獲得更完整的體驗」。

WebView 的 Google 登入問題

另一個讓我意外的問題是：因為透過 Line 分享連結。導致一打開，就發現 Google 登入無法使用。

Line 內建的 WebView 沒有完整支援 Google OAuth 流程，主要是因為 Google 要求「安全的瀏覽器環境」（例如 Chrome/Safari）。

這會導致：

• OAuth 視窗無法正確開啟
• 無法回傳 token
• 甚至直接跳出「瀏覽器不受支援」

後來，AI 幫我設計了判斷流程：

if (偵測到 WebView) {
顯示訊息：請使用瀏覽器開啟
提供「前往外部瀏覽器」按鈕
若使用者拒絕，則隱藏 Google 登入選項
}

這樣，就能避免「按了 Google 登入卻一直失敗」的困惑。

第一次印象的重要性

從最初只考慮橫向平板，到如今能夠在手機直向上流暢使用，這段過程讓我深刻體會到：平台的第一印象，往往決定了使用者是否願意繼續留下。如果不是 AI 幫我快速生成設計方案與程式碼，這些修改可能會花掉我數倍的時間。

而現在，這個兒童任務管理平台，終於不再只是「網頁版」，而是真正能夠在手機上像 App 一樣，帶來完整體驗的工具。

敬請期待下一篇《讓平台更完整：AI 打造專業入口網站(上集)》